<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Content Grids</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.2.0.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.2.0.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Layout grids</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
		
		<p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a  block style class convention called <code>ui-grid</code>. </p>
		
		<p>There are four preset layouts that can be used in any situation that requires columns:</p>
		<ul>
			<li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
			<li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
			<li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
			<li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
		</ul>

		<p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. </p>
		<p>Within the grid container, child elements are assigned <code>ui-block-a/b/c/d/e</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The <code>ui-block-a</code> class essentially clears the floats which will start a new line (see multiple row grids, below).</p>
			
		<h2>Two column grids</h2>
		<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>

<pre><code>
&lt;div class=&quot;ui-grid-a&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;strong&gt;I'm Block A&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;strong&gt;I'm Block B&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
&lt;/div&gt;&lt;!-- /grid-a --&gt;
</code></pre>


		
		<p>The above markup produces the following content layout:</p>
		
		<div class="ui-grid-a">
			<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
			<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
		</div><!-- /grid-a -->
		
		<p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
		
		<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the container of each of the two buttons inside to stretch them each to 50% of the screen width:</p>

<pre><code>
&lt;fieldset class=&quot;ui-grid-a&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;c&quot;&gt;Cancel&lt;/button&gt;&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;b&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;	   
&lt;/fieldset&gt;
</code></pre>
	
		<fieldset class="ui-grid-a">
			<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
			<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
		</fieldset>

		<p>Please note that the framework adds left and right margin to buttons in a grid. For a single button you can use a container with class <code>ui-grid-solo</code> and wrap the button in a div with class <code>ui-block-a</code> like the example below. This way the button will get the same margin.</p>
		 
<pre><code>
&lt;div class=&quot;ui-grid-a&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;button&quot; data-theme=&quot;c&quot;&gt;Previous&lt;/button&gt;&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;button type=&quot;button&quot; data-theme=&quot;c&quot;&gt;Next&lt;/button&gt;&lt;/div&gt;	   
&lt;/div&gt;
&lt;div class=&quot;ui-grid-solo&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;v&quot; data-theme=&quot;b&quot;&gt;More&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

		<div class="ui-grid-a">
			<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
			<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>	   
		</div>

		<div class="ui-grid-solo">
			<div class="ui-block-a"><button type="button" data-theme="b">More</button></div>
		</div>
	    
		<p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
			
		<div class="ui-grid-a">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
		</div><!-- /grid-a -->

		<h2>Three-column grids</h2>
		<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
	
<pre><code>
&lt;div class=&quot;ui-grid-b&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;
	&lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;
&lt;/div&gt;&lt;!-- /grid-b --&gt;
</code></pre>
		
		<p>This will produce a 33/33/33% grid for our content.</p>
			
		<div class="ui-grid-b">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
		</div><!-- /grid-b -->
		
		<p>And an example of a 3 column grid with buttons inside:</p>

		<fieldset class="ui-grid-b">
			<div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
			<div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>	 
			<div class="ui-block-c"><button type="submit" data-theme="b">Yes</button></div>  
		</fieldset>
		
		<h2>Four-column grids</h2>
		
		<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
			
		<div class="ui-grid-c">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
		</div><!-- /grid-c -->
		
		<h2>Five-column grids</h2>
		<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fifth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
			
		<div class="ui-grid-d">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
			<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
		</div><!-- /grid-c -->
		
		<h2>Multiple row grids</h2>
		
		<p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
			
		<div class="ui-grid-b">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
		</div><!-- /grid-c -->
		
		
		<h2>Grids in toolbars</h2>
		<p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 4 column grid.</p>
		<!--  NOTE: Inline styles are for demo purposes only, please use external styles -->
		<div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
			<div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
			<div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label></div>
			<div class="ui-block-c"><input id="value" value="5,000"></div>	 
			<div class="ui-block-d">
				<div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div>
			</div>
		</div><!-- /footer -->
	
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
						<li data-role="list-divider">Content Formatting</li>
						<li><a href="content-html.html">Basic HTML styles</a></li>
						<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
						<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p class="jqm-version"></p>
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>
